<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        .wrap {
            width: 880px;
            margin: 50px auto;
        }

        .wrap>div {
            width: 430px;
            height: 430px;
            border: 5px solid #000;
        }

        .middleImg {
            float: left;
            background: url("./images/imgA_2.jpg") no-repeat;
            position: relative;
        }

        .largeImg {
            float: right;
            background: url("./images/imgA_3.jpg") no-repeat;
            display: none;
        }

        .smallImg {
            clear: both;
            list-style: none;
            display: flex;
        }

        .smallImg li {
            margin: 20px 10px;
        }

        .smallImg img {
            width: 60px;
            height: 60px;
            border: 2px solid white;
        }

        .smallImg li:first-child img {
            border-color: black;
        }

        .enlarge {
            width: 231px;
            height: 231px;
            background: url("./images/bg.png");
            position: absolute;
            display: none;
        }
    </style>
</head>

<body>
    <div class="wrap">
        <div id="middleImg" class="middleImg">
            <div id="enlarge" class="enlarge"></div>
        </div>
        <div id="largeImg" class="largeImg"></div>
        <ul id="smallImg" class="smallImg"></ul>
    </div>


    <script>
        let images = {
            small: ["imgA_1.jpg", "imgB_1.jpg", "imgC_1.jpg"],
            middle: ["imgA_2.jpg", "imgB_2.jpg", "imgC_2.jpg"],
            large: ["imgA_3.jpg", "imgB_3.jpg", "imgC_3.jpg"]
        }
        let smallImg = document.getElementById('smallImg');
        let middleImg = document.getElementById('middleImg');
        let largeImg = document.getElementById('largeImg');
        let enlarge = document.getElementById('enlarge');

        // 将小图渲染至页面
        smallImg.innerHTML = images.small.map((item, index) => (
            `<li><img src="./images/${item}" data-id="${index}" class="img"/></li>`
        )).join("");

        smallImg.addEventListener("mouseover", (e) => {
            if (e.target.nodeName === "IMG") {
                let imgArr = document.getElementsByClassName("img");
                for (let i = 0; i < imgArr.length; i++) {
                    imgArr[i].style.borderColor = "white";
                }
                e.target.style.borderColor = "black";
                let i = e.target.dataset.id;
                middleImg.style.background = `url("./images/${images.middle[i]}") no-repeat`;
                largeImg.style.background = `url("./images/${images.large[i]}") no-repeat`;
            }
        }, false)

        middleImg.addEventListener("mouseenter", () => {
            largeImg.style.display = "block";
            enlarge.style.display = "block";
        }, false)
        middleImg.addEventListener("mouseleave", () => {
            largeImg.style.display = "none";
            enlarge.style.display = "none";
        }, false)

        middleImg.addEventListener("mousemove", (e) => {
            // 鼠标相对于页面的坐标
            let { pageX, pageY } = e;
            // middleImg 相对于文档显示区的坐标
            let { offsetLeft, offsetTop } = middleImg;
            // enlarge 移动的距离(其中 5 是减去边框的宽度)
            let moveX = pageX - offsetLeft - 5 - enlarge.offsetWidth / 2;
            let moveY = pageY - offsetTop - 5 - enlarge.offsetHeight / 2;
            // enlarge 能移动的最大距离
            let maxX = middleImg.clientWidth - enlarge.offsetWidth;
            let maxY = middleImg.clientHeight - enlarge.offsetHeight;
            // 对 enlarge 移动的距离做范围限制
            if (moveX <= 0) {
                moveX = 0;
            }
            if (moveY <= 0) {
                moveY = 0;
            }
            if (moveX >= maxX) {
                moveX = maxX;
            }
            if (moveY >= maxY) {
                moveY = maxY;
            }
            enlarge.style.left = moveX + "px";
            enlarge.style.top = moveY + "px";
            // 大图的背景图位置
            largeImg.style.backgroundPositionX = -middleImg.clientWidth / enlarge.offsetWidth * moveX + "px";
            largeImg.style.backgroundPositionY = -middleImg.clientHeight / enlarge.offsetHeight * moveY + "px";

        }, false)


    </script>
</body>

</html>